<template>
	<view class="video-container">
		<view class="video-card">
			<!-- <u-subsection inactiveColor='#595959' activeColor='#f97316' :list="textlist"
				:current="textvalue" @change="changeNum"></u-subsection> -->
			<view class="card-item" :class="{'active':videoNum == 1}" @click="changeNum(1)">作品</view>
			<view class="card-item" :class="{'active':videoNum == 2}" @click="changeNum(2)">任务列表</view>
		</view>
		<view class="video-content">
			<view class="content-item" v-show="videoNum == 1">
				<myWork />
			</view>
			<view class="content-item" v-show="videoNum == 2">
				<myTask />
			</view>
		</view>
	</view>
</template>

<script>
	import myWork from './my_word.vue';
	import myTask from './my_task.vue';
	export default {
		data() {
			return {
				// textvalue:0,
				videoNum:1,
				// textlist:['作品', '任务列表']
			};
		},
		components: {
			myWork,
			myTask,
		},

		onload() {

		},
		mounted() {
			uni.$emit('update', {
				active: 2
			}) // 触发事件并传递参数	
		},
		watch: {

		},
		methods: {
			changeNum(e){
				// console.log(e);
				// this.textvalue=e
				this.videoNum = e;
			}
		}
	};
</script>

<style scoped>
	
	.video-container{
		width:100%;
		height:auto;
		min-height: 100vh; 
		box-sizing:border-box;
		padding:10px 0px 0px;
		background-color:#fff !important;
	}
	.video-card{
		width:50%;
		height:auto;
		border-radius:50px;
		background-color:#fff;
		box-sizing:border-box;
		padding:2px 2px;
		margin: 0 10px;
		border:1px solid #ccc;
		display:flex;
		justify-content:space-between;
	}
	.card-item{
		width:50%;
		height:100%;
		line-height:30px;
		text-align:center;
		font-size:14px;
		border-radius:50px;
		transition: transform 0.3s, background-color 0.3s;
		cursor: pointer;
		opacity: 0.8;
	}
	.card-item.active{
		color:#ffff;
		background-color:#F97316;
		opacity: 1;
	}
	.video-content{
		width:100%;
		height:auto;
		margin-top:10px;
	}
	.content-item{
		width:100%;
		height:auto;
	}
	::v-deep .u-subsection {
		background-color: #f9efe8 !important;
		padding: 5px 10px !important;
		width: 100% !important;
		border-radius: 30px !important;
	}
	
	::v-deep .u-subsection--button {
		height: 40px !important;
	}
	
	::v-deep .u-subsection__bar {
		height: 30px !important;
		border-radius: 30px !important;
	}
</style>